<template>
    <div>
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <el-card class="box-card">
                    <BasicsTabs></BasicsTabs>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <el-card class="box-card">
                    <Tabbed></Tabbed>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <el-card class="box-card">
                    <cardTab></cardTab>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <el-card class="box-card">
                    <customTabs></customTabs>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import BasicsTabs from '../tabs/BasicsTabs'
import Tabbed from '../tabs/Tabbed'
import cardTab from '../tabs/cardTab'
import customTabs from '../tabs/customTabs'
export default {
  data: () => ({}),
  components: {
    BasicsTabs,
    Tabbed,
    cardTab,
    customTabs
  }
}
</script>

<style>
.el-col {
  border-radius: 4px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
